
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水波浪Demo</title>
</head>
<style>
     .boll {
            height: 174px;
            width: 294px;
            /* border-radius: 50%; */
            /* border: 2px solid #fe810c; */
            float: left;
            position: relative;
            font-size: 14px;
            overflow: hidden;
        }
        
        .text {
            text-align: center;
            margin-top: 40px;
            color: #fe810c;
        }
        
        .num {
            font-size: 30px;
        }
        
        .water {
            height: 100%;
            background: url(./1.png) repeat-x;
            position: absolute;
			background-size: 100% 100%;
            width: 100%;
            -webkit-animation: move_wave 6s linear infinite;
            animation: move_wave 6s linear infinite;
        }
        
        .w1 {
            opacity: .5;
            background-position: 120px 0;
            -webkit-animation: move_wave 10s linear infinite;
            animation: move_wave 10s linear infinite;
        }
        
        .w2 {
            opacity: .3;
            background-position: 60px 0;
            -webkit-animation: move_wave 8s linear infinite;
            animation: move_wave 8s linear infinite;
        }
        
        @-webkit-keyframes move_wave {
            0% {
                background-position: 0 0
            }
            to {
                background-position: 532px 0
            }
        }
        
        @keyframes move_wave {
            0% {
                background-position: 0 0
            }
            to {
                background-position: 532px 0
            }
        }
</style>
<body>
     <div class="boll">
           <div class="water w1"></div>
           <div class="water w2"></div>
           <div class="water"></div>
       </div>
</body>
</html>
